<template>
  <view class="drone-task-hall">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-content" style="width: 100%;">
        <view class="logo">
          <text class="logo-icon">✈️</text>
          <text class="logo-text">抢单大厅</text>
        </view>
        
       
        
        <view class="user-actions">
          <view class="notification-btn" @click="openNotifications">
            <text class="bell-icon">🔔</text>
            <view class="badge" v-if="unreadCount">{{ unreadCount }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选面板 -->
    <view class="filter-panel">
      <!-- 筛选标签页 -->
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: activeTab === 'category' }"
          @click="activeTab = 'category'"
        >
          任务类型
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeTab === 'budget' }"
          @click="activeTab = 'budget'"
        >
          预算与时间
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeTab === 'requirements' }"
          @click="activeTab = 'requirements'"
        >
          要求与地点
        </view>
      </view>
      
      <!-- 任务类型筛选 -->
      <view class="filter-content" v-if="activeTab === 'category'">
        <view class="filter-grid">
          <view 
            class="category-card" 
            v-for="item in taskTypes" 
            :key="item.id"
            @click="toggleCategory(item.id)"
            :class="{ active: selectedCategories.includes(item.id) }"
          >
            <view class="category-icon" :style="{ backgroundColor: item.color + '20' }">
              <text :style="{ color: item.color }">{{ item.icon }}</text>
            </view>
            <view class="category-name">{{ item.name }}</view>
          </view>
        </view>
        
        <view class="filter-tags">
          <view 
            class="filter-tag" 
            v-for="tag in popularTags" 
            :key="tag.id"
            @click="toggleTag(tag.id)"
            :class="{ active: selectedTags.includes(tag.id) }"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>
      
      <!-- 预算与时间筛选 -->
      <view class="filter-content" v-if="activeTab === 'budget'">
        <view class="filter-section">
          <view class="filter-title">预算范围</view>
          <view class="budget-control">
            <view class="budget-display">
              <text>¥{{ minBudget }} - ¥{{ maxBudget }}</text>
            </view>
            <slider 
              v-model="budgetRange" 
              min="0" 
              max="10000" 
              step="500"
              @change="updateBudgetRange"
              activeColor="#367AF6"
              backgroundColor="#e5e9f2"
            ></slider>
            <view class="budget-markers">
              <text>0</text>
              <text>5k</text>
              <text>10k+</text>
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="filter-title">交付时间</view>
          <view class="time-options">
            <view 
              class="time-option" 
              v-for="time in deliveryTimes" 
              :key="time.id"
              @click="selectDeliveryTime(time.id)"
              :class="{ active: selectedDeliveryTime === time.id }"
            >
              {{ time.label }}
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="filter-title">发布时间</view>
          <view class="time-options">
            <view 
              class="time-option" 
              v-for="time in postTimes" 
              :key="time.id"
              @click="selectPostTime(time.id)"
              :class="{ active: selectedPostTime === time.id }"
            >
              {{ time.label }}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 要求与地点筛选 -->
      <view class="filter-content" v-if="activeTab === 'requirements'">
        <view class="filter-section">
          <view class="filter-title">设备要求</view>
          <view class="equipment-options">
            <view 
              class="equipment-option" 
              v-for="equip in equipmentTypes" 
              :key="equip.id"
              @click="toggleEquipment(equip.id)"
              :class="{ active: selectedEquipment.includes(equip.id) }"
            >
              <view class="equipment-icon">{{ equip.icon }}</view>
              <view class="equipment-name">{{ equip.name }}</view>
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="filter-title">行业领域</view>
          
			<u-scroll-list>
				<view class="skill-levels">
			      <view 
					class="skill-level" 
					v-for="level in skillLevels" 
					:key="level.id"
					@click="selectSkillLevel(level.id)"
					:class="{ active: selectedSkillLevel === level.id }"
				  >
					<view class="level-indicator" :style="{ backgroundColor: level.color }"></view>
					<view class="level-name">{{ level.name }}</view>
				  </view>
				</view>
			</u-scroll-list>
            
        </view>
        
        <view class="filter-section">
          <view class="filter-title">拍摄地点</view>
          <view class="location-picker">
            <view class="city-selector" @click="openCitySelector">
              <text v-if="selectedCity">{{ selectedCity }}</text>
              <text v-else class="placeholder">选择城市</text>
              <text class="arrow">▼</text>
            </view>
            <input 
              v-model="locationDetail" 
              placeholder="具体地点（可选）"
              class="location-input"
            />
          </view>
        </view>
      </view>
      <view class="search-box">
               <text class="search-icon">🔍</text>
               <input 
                 v-model="searchKeyword" 
                 placeholder="搜索任务、地点或标签"
                 @confirm="handleSearch"
               />
               <text class="clear-btn" v-if="searchKeyword" @click="clearSearch">×</text>
             </view>
      <!-- 筛选操作按钮 -->
      <view class="filter-actions">
        <button class="reset-btn" @click="resetFilters">
          <text class="icon">↺</text> 重置
        </button>
        <button class="apply-btn" @click="applyFilters">
          应用筛选 <text class="icon">→</text>
        </button>
      </view>
    </view>
 
    <!-- 列表控制栏 -->
    <view class="list-controls">
      <view class="sort-options">
        <view 
          class="sort-btn" 
          :class="{ active: activeSort === 'recommended' }"
          @click="setSort('recommended')"
        >
          <text class="sort-icon">✨</text> 推荐
        </view>
        <view 
          class="sort-btn" 
          :class="{ active: activeSort === 'price_high' }"
          @click="setSort('price_high')"
        >
          <text class="sort-icon">💎</text> 价格从高到低
        </view>
        <view 
          class="sort-btn" 
          :class="{ active: activeSort === 'latest' }"
          @click="setSort('latest')"
        >
          <text class="sort-icon">🕒</text> 最新发布
        </view>
      </view>
      
      <view class="view-toggle">
        <view 
          class="view-btn" 
          :class="{ active: viewMode === 'grid' }"
          @click="setViewMode('grid')"
          title="网格视图"
        >
          <text>▦</text>
        </view>
        <view 
          class="view-btn" 
          :class="{ active: viewMode === 'list' }"
          @click="setViewMode('list')"
          title="列表视图"
        >
          <text>☰</text>
        </view>
      </view>
    </view>

    <!-- 任务网格视图 -->
    <view class="task-grid" v-if="viewMode === 'grid'">
      <view 
        class="task-card" 
        v-for="(task, index) in filteredTasks" 
        :key="task.id"
        @click="gotoTaskDetail(task)"
      >
        <view class="task-image-container">
          <image 
            :src="task.coverImage" 
            mode="cover" 
            class="task-image"
            :alt="task.title"
          ></image>
          <view 
            class="task-type-badge" 
            :style="{ backgroundColor: getTypeColor(task.typeId) }"
          >
            {{ getTypeName(task.typeId) }}
          </view>
          <view class="favorite-btn" @click.stop="toggleFavorite(task.id, index)">
            <text class="favorite-icon" :class="{ active: task.isFavorite }">★</text>
          </view>
        </view>
        
        <view class="task-info">
          <view class="task-title">{{ task.title }}</view>
          
          <view class="task-meta">
            <view class="meta-item">
              <text class="meta-icon">📍</text>
              <text>{{ task.location }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">📅</text>
              <text>{{ task.dueDate }}</text>
            </view>
          </view>
          
          <view class="task-footer">
            <view class="task-price">
              <text class="price-symbol">¥</text>
              <text class="price-amount">{{ task.price }}</text>
            </view>
            <button class="accept-btn" @click.stop="acceptTask(task, index)">
              接单
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 任务列表视图 -->
    <view class="task-list" v-if="viewMode === 'list'">
      <view 
        class="task-row" 
        v-for="(task, index) in filteredTasks" 
        :key="task.id"
        @click="gotoTaskDetail(task)"
      >
        <view class="row-image">
          <image 
            :src="task.coverImage" 
            mode="cover" 
            :alt="task.title"
          ></image>
          <view 
            class="task-type-badge" 
            :style="{ backgroundColor: getTypeColor(task.typeId) }"
          >
            {{ getTypeName(task.typeId) }}
          </view>
        </view>
        
        <view class="row-details">
          <view class="row-title">{{ task.title }}</view>
          
          <view class="row-meta">
            <view class="meta-item">
              <text class="meta-icon">📍</text>
              <text>{{ task.location }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">📅</text>
              <text>{{ task.dueDate }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">🎯</text>
              <text>{{ getSkillLevelName(task.skillLevel) }}</text>
            </view>
          </view>
        </view>
        
        <view class="row-actions">
          <view class="row-price">
            <text class="price-symbol">¥</text>
            <text class="price-amount">{{ task.price }}</text>
          </view>
          <view class="action-buttons">
            <view class="favorite-btn" @click.stop="toggleFavorite(task.id, index)">
              <text class="favorite-icon" :class="{ active: task.isFavorite }">★</text>
            </view>
            <button class="accept-btn" @click.stop="acceptTask(task, index)">
              接单
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredTasks.length === 0 && !isLoading">
      <view class="empty-icon">🔍</view>
      <view class="empty-title">未找到匹配的任务</view>
      <view class="empty-subtitle">尝试调整筛选条件或搜索其他关键词</view>
      <button class="reset-btn" @click="resetAllFilters">
        清除所有筛选
      </button>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <view class="loader"></view>
      <view class="loading-text">正在加载任务...</view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !isLoading && filteredTasks.length > 0">
      <button class="load-more-btn" @click="loadMoreTasks">
        <view class="small-loader"></view>
        <text>加载更多任务</text>
      </button>
    </view>

    <!-- 发布任务浮动按钮 -->
    <view class="floating-publish-btn" @click="gotoPublishTask">
      <text class="plus-icon">+</text>
      <text class="btn-text">发布任务</text>
    </view>

    <!-- 接单成功弹窗 -->
    <view class="success-modal" v-if="showSuccessModal">
      <view class="modal-backdrop" @click="showSuccessModal = false"></view>
      <view class="modal-content">
        <view class="success-icon">✓</view>
        <view class="success-title">接单成功！</view>
        <view class="success-message">
          您已成功接取「{{ currentTaskTitle }}」任务
          可在"我的任务"中查看详情
        </view>
        <view class="modal-buttons">
          <button class="btn-secondary" @click="showSuccessModal = false">
            继续浏览
          </button>
          <button class="btn-primary" @click="gotoMyTasks">
            查看任务详情
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏状态
      searchKeyword: '',
      unreadCount: 2,
      
      // 筛选标签页状态
      activeTab: 'category',
      
      // 任务类型数据
      taskTypes: [
        { id: 1, name: '风景航拍', icon: '🏞️', color: '#367AF6' },
        { id: 2, name: '房地产拍摄', icon: '🏠', color: '#00B42A' },
        { id: 3, name: '活动记录', icon: '🎉', color: '#FAAD14' },
        { id: 4, name: '影视制作', icon: '🎬', color: '#722ED1' },
        { id: 5, name: '婚礼航拍', icon: '💍', color: '#F5222D' },
        { id: 6, name: '商业宣传', icon: '📣', color: '#FF7D00' }
      ],
      
      // 热门标签
      popularTags: [
        { id: 1, name: '4K画质' },
        { id: 2, name: '视频拍摄' },
        { id: 3, name: '照片拍摄' },
        { id: 4, name: '夜景' },
        { id: 5, name: '延时摄影' },
        { id: 6, name: '全景' }
      ],
      
      // 交付时间选项
      deliveryTimes: [
        { id: 1, label: '24小时内' },
        { id: 2, label: '3天内' },
        { id: 3, label: '1周内' },
        { id: 4, label: '15天内' },
        { id: 5, label: '不限' }
      ],
      
      // 发布时间选项
      postTimes: [
        { id: 1, label: '今天' },
        { id: 2, label: '3天内' },
        { id: 3, label: '1周内' },
        { id: 4, label: '1个月内' }
      ],
      
      // 设备要求
      equipmentTypes: [
        { id: 1, name: '专业级无人机', icon: '🚁' },
        { id: 2, name: '带云台', icon: '🔄' },
        { id: 3, name: '4K相机', icon: '📹' },
        { id: 4, name: 'RAW格式支持', icon: '🗂️' },
        { id: 5, name: '长焦镜头', icon: '🔍' }
      ],
      // 技能等级
      skillLevels: [
        { id: 1, name: '植保', color: '#52C41A' },
        { id: 2, name: '物流', color: '#FAAD14' },
        { id: 3, name: '电力', color: '#F5222D' },
		{ id: 4, name: '测绘', color: '#52C41A' },
		{ id: 5, name: '消防', color: '#FAAD14' },
		{ id: 6, name: '环境', color: '#F5222D' },
		{ id: 7, name: '航拍', color: '#52C41A' },
		{ id: 8, name: '物流', color: '#FAAD14' },
		{ id: 9, name: '城管', color: '#F5222D' }
      ],
      
      // 筛选状态
      selectedCategories: [],
      selectedTags: [],
      budgetRange: 5000,
      minBudget: 0,
      maxBudget: 5000,
      selectedDeliveryTime: null,
      selectedPostTime: null,
      selectedEquipment: [],
      selectedSkillLevel: null,
      selectedCity: '',
      locationDetail: '',
      
      // 列表控制
      activeSort: 'recommended',
      viewMode: 'grid',
      
      // 任务数据
      tasks: [],
      filteredTasks: [],
      isLoading: false,
      hasMore: true,
      currentPage: 1,
      
      // 弹窗状态
      showSuccessModal: false,
      currentTaskTitle: ''
    };
  },
  
  onLoad() {
    // 初始加载任务
    this.loadTasks();
  },
  
  methods: {
    // 加载任务数据
    loadTasks() {
      this.isLoading = true;
      
      // 模拟API请求
      setTimeout(() => {
        const newTasks = Array.from({ length: 8 }, (_, i) => {
          const id = (this.currentPage - 1) * 8 + i + 1;
          const typeId = Math.floor(Math.random() * this.taskTypes.length) + 1;
          const skillLevel = Math.floor(Math.random() * 3) + 1;
          
          return {
            id,
            title: this.generateTaskTitle(typeId),
            typeId,
            coverImage: `https://picsum.photos/id/${120 + id}/400/300`,
            location: this.generateLocation(),
            dueDate: this.generateDueDate(),
            price: Math.floor(Math.random() * 4500) + 500, // 500-5000元
            skillLevel,
            isFavorite: Math.random() > 0.8,
            publisher: {
              name: `客户${Math.floor(Math.random() * 1000)}`,
              rating: (4 + Math.random()).toFixed(1)
            }
          };
        });
        
        this.tasks = this.currentPage === 1 ? newTasks : [...this.tasks, ...newTasks];
        this.filteredTasks = this.filterTasks();
        this.isLoading = false;
        this.hasMore = this.currentPage < 4; // 模拟4页数据
      }, 1200);
    },
    
    // 生成任务标题
    generateTaskTitle(typeId) {
      const titles = {
        1: ['山区全景航拍', '海岸线风光拍摄', '城市天际线摄影', '湖泊风光航拍'],
        2: ['别墅项目全景拍摄', '商业楼盘宣传摄影', '小区环境航拍', '样板房周边拍摄'],
        3: ['音乐节现场记录', '马拉松赛事航拍', '企业年会拍摄', '户外活动记录'],
        4: ['微电影航拍镜头', '广告片空中取景', '纪录片素材拍摄', '宣传片航拍'],
        5: ['婚礼全程航拍', '求婚现场记录', '婚纱外景拍摄', '婚礼车队航拍'],
        6: ['产品宣传视频', '品牌活动航拍', '企业形象宣传片', '门店开业记录']
      };
      
      const options = titles[typeId] || ['专业航拍服务', '无人机拍摄任务'];
      return options[Math.floor(Math.random() * options.length)];
    },
    
    // 生成地点
    generateLocation() {
      const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京'];
      const districts = ['朝阳', '海淀', '浦东', '天河', '南山', '西湖', '锦江', '玄武'];
      const locations = ['公园', '湖畔', '商业区', '创意园', '度假村', '山地'];
      
      return `${cities[Math.floor(Math.random() * cities.length)]}${districts[Math.floor(Math.random() * districts.length)]}${locations[Math.floor(Math.random() * locations.length)]}`;
    },
    
    // 生成截止日期
    generateDueDate() {
      const today = new Date();
      const daysLater = Math.floor(Math.random() * 14) + 1;
      const dueDate = new Date(today.setDate(today.getDate() + daysLater));
      
      return `${dueDate.getMonth() + 1}月${dueDate.getDate()}日前`;
    },
    
    // 切换任务类型选择
    toggleCategory(typeId) {
      const index = this.selectedCategories.indexOf(typeId);
      if (index > -1) {
        this.selectedCategories.splice(index, 1);
      } else {
        this.selectedCategories.push(typeId);
      }
    },
    
    // 切换标签选择
    toggleTag(tagId) {
      const index = this.selectedTags.indexOf(tagId);
      if (index > -1) {
        this.selectedTags.splice(index, 1);
      } else {
        this.selectedTags.push(tagId);
      }
    },
    
    // 更新预算范围
    updateBudgetRange() {
      this.maxBudget = this.budgetRange;
    },
    
    // 选择交付时间
    selectDeliveryTime(timeId) {
      this.selectedDeliveryTime = this.selectedDeliveryTime === timeId ? null : timeId;
    },
    
    // 选择发布时间
    selectPostTime(timeId) {
      this.selectedPostTime = this.selectedPostTime === timeId ? null : timeId;
    },
    
    // 切换设备要求选择
    toggleEquipment(equipId) {
      const index = this.selectedEquipment.indexOf(equipId);
      if (index > -1) {
        this.selectedEquipment.splice(index, 1);
      } else {
        this.selectedEquipment.push(equipId);
      }
    },
    
    // 选择技能等级
    selectSkillLevel(levelId) {
      this.selectedSkillLevel = this.selectedSkillLevel === levelId ? null : levelId;
    },
    
    // 打开城市选择器
    openCitySelector() {
      // 实际项目中可调用uni的城市选择器API
      const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京'];
      this.selectedCity = cities[Math.floor(Math.random() * cities.length)];
    },
    
    // 应用筛选
    applyFilters() {
      this.filteredTasks = this.filterTasks();
      // 滚动到顶部
      uni.pageScrollTo({ scrollTop: 0, duration: 300 });
    },
    
    // 重置筛选
    resetFilters() {
      if (this.activeTab === 'category') {
        this.selectedCategories = [];
        this.selectedTags = [];
      } else if (this.activeTab === 'budget') {
        this.budgetRange = 5000;
        this.maxBudget = 5000;
        this.selectedDeliveryTime = null;
        this.selectedPostTime = null;
      } else if (this.activeTab === 'requirements') {
        this.selectedEquipment = [];
        this.selectedSkillLevel = null;
        this.selectedCity = '';
        this.locationDetail = '';
      }
    },
    
    // 重置所有筛选条件
    resetAllFilters() {
      this.selectedCategories = [];
      this.selectedTags = [];
      this.budgetRange = 5000;
      this.maxBudget = 5000;
      this.selectedDeliveryTime = null;
      this.selectedPostTime = null;
      this.selectedEquipment = [];
      this.selectedSkillLevel = null;
      this.selectedCity = '';
      this.locationDetail = '';
      this.searchKeyword = '';
      this.activeSort = 'recommended';
      
      this.filteredTasks = this.filterTasks();
    },
    
    // 筛选任务
    filterTasks() {
      let result = [...this.tasks];
      
      // 搜索筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(task => 
          task.title.toLowerCase().includes(keyword) || 
          task.location.toLowerCase().includes(keyword) ||
          this.getTypeName(task.typeId).toLowerCase().includes(keyword)
        );
      }
      
      // 任务类型筛选
      if (this.selectedCategories.length > 0) {
        result = result.filter(task => this.selectedCategories.includes(task.typeId));
      }
      
      // 预算范围筛选
      result = result.filter(task => task.price >= this.minBudget && task.price <= this.maxBudget);
      
      // 交付时间筛选
      if (this.selectedDeliveryTime && this.selectedDeliveryTime !== 5) {
        const daysMap = { 1: 1, 2: 3, 3: 7, 4: 15 };
        const maxDays = daysMap[this.selectedDeliveryTime];
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        result = result.filter(task => {
          // 解析截止日期
          const dateMatch = task.dueDate.match(/(\d+)月(\d+)日前/);
          if (!dateMatch) return true;
          
          const [_, month, day] = dateMatch;
          const taskDate = new Date();
          taskDate.setMonth(parseInt(month) - 1);
          taskDate.setDate(parseInt(day));
          taskDate.setHours(0, 0, 0, 0);
          
          // 计算天数差
          const timeDiff = taskDate - today;
          const dayDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
          
          return dayDiff <= maxDays;
        });
      }
      
      // 技能等级筛选
      if (this.selectedSkillLevel) {
        result = result.filter(task => task.skillLevel === this.selectedSkillLevel);
      }
      
      // 排序
      switch (this.activeSort) {
        case 'price_high':
          result.sort((a, b) => b.price - a.price);
          break;
        case 'latest':
          result.sort((a, b) => b.id - a.id);
          break;
        case 'recommended':
        default:
          // 模拟推荐排序
          result.sort((a, b) => (b.price / 100) - (a.price / 100) + (b.id - a.id) / 10);
          break;
      }
      
      return result;
    },
    
    // 设置排序方式
    setSort(sortType) {
      this.activeSort = sortType;
      this.filteredTasks = this.filterTasks();
    },
    
    // 设置视图模式
    setViewMode(mode) {
      this.viewMode = mode;
    },
    
    // 处理搜索
    handleSearch() {
      this.filteredTasks = this.filterTasks();
      uni.hideKeyboard();
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKeyword = '';
      this.filteredTasks = this.filterTasks();
    },
    
    // 加载更多任务
    loadMoreTasks() {
      if (this.isLoading || !this.hasMore) return;
      this.currentPage++;
      this.loadTasks();
    },
    
    // 切换收藏状态
    toggleFavorite(taskId, index) {
      const task = this.filteredTasks[index];
      task.isFavorite = !task.isFavorite;
      
      // 更新原始数据
      const originalIndex = this.tasks.findIndex(t => t.id === taskId);
      if (originalIndex !== -1) {
        this.tasks[originalIndex].isFavorite = task.isFavorite;
      }
      
      // 显示提示
      uni.showToast({
        title: task.isFavorite ? '收藏成功' : '取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 接受任务
    acceptTask(task, index) {
      this.currentTaskTitle = task.title;
      
      // 模拟接单过程
      uni.showLoading({ title: '处理中...' });
      
      setTimeout(() => {
        uni.hideLoading();
        this.showSuccessModal = true;
        
        // 从列表中移除任务
        this.filteredTasks.splice(index, 1);
        const originalIndex = this.tasks.findIndex(t => t.id === task.id);
        if (originalIndex !== -1) {
          this.tasks.splice(originalIndex, 1);
        }
      }, 1500);
    },
    
    // 获取任务类型名称
    getTypeName(typeId) {
      const type = this.taskTypes.find(t => t.id === typeId);
      return type ? type.name : '其他类型';
    },
    
    // 获取任务类型颜色
    getTypeColor(typeId) {
      const type = this.taskTypes.find(t => t.id === typeId);
      return type ? type.color : '#86909C';
    },
    
    // 获取技能等级名称
    getSkillLevelName(levelId) {
      const level = this.skillLevels.find(l => l.id === levelId);
      return level ? level.name : '未指定';
    },
    
    // 导航到任务详情
    gotoTaskDetail(t) {
      uni.navigateTo({
        url: `/pages/task/detail?id=${t.id}&title=${t.title}`
      });
    },
    
    // 导航到发布任务
    gotoPublishTask() {
      uni.navigateTo({
        url: '/pages/task/publish-task'
      });
    },
    
    // 导航到我的任务
    gotoMyTasks() {
      this.showSuccessModal = false;
      uni.navigateTo({
        url: '/pages/task/my-tasks'
      });
    },
    
    // 导航到个人中心
    gotoProfile() {
      uni.navigateTo({
        url: '/pages/user/profile'
      });
    },
    
    // 打开通知
    openNotifications() {
      uni.navigateTo({
        url: '/pages/task/notifications'
      });
    }
  }
};
</script>

<style scoped>
.drone-task-hall {
  background-color: #f7f9fc;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.navbar {
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 15rpx 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.logo-icon {
  font-size: 40rpx;
  margin-right: 10rpx;
  color: #367AF6;
}

.logo-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #1D2129;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #F2F3F5;
  border-radius: 35rpx;
  padding: 0 20rpx;
  height: 70rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #86909C;
  margin-right: 10rpx;
}

.search-box input {
  flex: 1;
  height: 100%;
  font-size: 26rpx;
  background: transparent;
  border: none;
  outline: none;
}

.search-box input::placeholder {
  color: #86909C;
}

.clear-btn {
  font-size: 26rpx;
  color: #86909C;
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
}

.user-actions {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.notification-btn {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.bell-icon {
  font-size: 32rpx;
  color: #4E5969;
}

.badge {
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #F5222D;
  color: white;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid #F2F3F5;
}

/* 筛选面板 */
.filter-panel {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 15rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.filter-tabs {
  display: flex;
  border-bottom: 1px solid #F2F3F5;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  font-weight: 500;
  color: #86909C;
  position: relative;
}

.filter-tab.active {
  color: #367AF6;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 4rpx;
  background-color: #367AF6;
  border-radius: 2rpx 2rpx 0 0;
}

.filter-content {
  padding: 20rpx;
}

.filter-section {
  margin-bottom: 25rpx;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
}

.filter-title::before {
  content: '';
  width: 8rpx;
  height: 24rpx;
  background-color: #367AF6;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

/* 任务类型筛选 */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
  margin-bottom: 25rpx;
}

.category-card {
  background-color: #F7F8FA;
  border-radius: 12rpx;
  padding: 20rpx 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
}

.category-card.active {
  background-color: #E8F3FF;
  box-shadow: 0 4rpx 12rpx rgba(54, 122, 246, 0.15);
}

.category-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #4E5969;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.filter-tag {
  padding: 10rpx 20rpx;
  background-color: #F2F3F5;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #4E5969;
  transition: all 0.2s;
}

.filter-tag.active {
  background-color: #367AF6;
  color: #fff;
}

/* 预算控制 */
.budget-control {
  padding: 10rpx 0;
}

.budget-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  font-size: 24rpx;
  color: #4E5969;
}

slider {
  width: 100%;
  height: 10rpx;
}

.budget-markers {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
  font-size: 20rpx;
  color: #86909C;
}

/* 时间选项 */
.time-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.time-option {
  padding: 12rpx 22rpx;
  background-color: #F2F3F5;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #4E5969;
  transition: all 0.2s;
}

.time-option.active {
  background-color: #367AF6;
  color: #fff;
}

/* 设备要求 */
.equipment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.equipment-option {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #F2F3F5;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #4E5969;
  transition: all 0.2s;
}

.equipment-option.active {
  background-color: #367AF6;
  color: #fff;
}

.equipment-icon {
  margin-right: 10rpx;
  font-size: 26rpx;
}

/* 技能等级 */
.skill-levels {
  display: flex;
  gap: 15rpx;
}

.skill-level {
  flex: 1;
  display: flex;
  width: 80rpx;
  align-items: center;
  padding: 12rpx 15rpx;
  background-color: #F2F3F5;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #4E5969;
  transition: all 0.2s;
}

.skill-level.active {
  background-color: #E8F3FF;
  color: #367AF6;
  border: 1px solid #367AF6;
}

.level-indicator {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

/* 地点选择 */
.location-picker {
  display: flex;
  gap: 15rpx;
}

.city-selector {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  height: 70rpx;
  background-color: #F2F3F5;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #4E5969;
}

.city-selector .placeholder {
  color: #86909C;
}

.arrow {
  font-size: 24rpx;
  color: #86909C;
}

.location-input {
  flex: 2;
  height: 70rpx;
  padding: 0 20rpx;
  background-color: #F2F3F5;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #4E5969;
  border: none;
}

.location-input::placeholder {
  color: #86909C;
}

/* 筛选操作按钮 */
.filter-actions {
  display: flex;
  gap: 15rpx;
  padding: 15rpx 20rpx 5rpx;
  border-top: 1px solid #F2F3F5;
  margin-top: 10rpx;
}

.reset-btn, .apply-btn {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reset-btn {
  background-color: #F2F3F5;
  color: #4E5969;
  border: none;
}

.apply-btn {
  background-color: #367AF6;
  color: #fff;
  border: none;
}

.icon {
  margin-right: 8rpx;
}

/* 列表控制栏 */
.list-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.sort-options {
  display: flex;
  gap: 10rpx;
}

.sort-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 18rpx;
  background-color: #fff;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #4E5969;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.sort-btn.active {
  background-color: #367AF6;
  color: #fff;
}

.sort-icon {
  margin-right: 8rpx;
  font-size: 24rpx;
}

.view-toggle {
  display: flex;
  background-color: #fff;
  border-radius: 25rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.view-btn {
  width: 60rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #4E5969;
}

.view-btn.active {
  background-color: #367AF6;
  color: #fff;
}

/* 网格视图任务列表 */
.task-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 20rpx;
}

.task-card {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.task-card:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.task-image-container {
  position: relative;
  height: 220rpx;
}

.task-image {
  width: 100%;
  height: 100%;
  display: block;
}

.task-type-badge {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}

.favorite-btn {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9CDD4;
  color: #C9CDD4;
}

.favorite-btn .favorite-icon.active {
  color: #F5222D;
}

.favorite-icon {
  font-size: 24rpx;
}

.task-info {
  padding: 15rpx;
}

.task-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 15rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #86909C;
}

.meta-icon {
  margin-right: 5rpx;
  font-size: 22rpx;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 24rpx;
  color: #F5222D;
}

.price-amount {
  font-size: 30rpx;
  font-weight: bold;
  color: #F5222D;
}

.accept-btn {
  background-color: #367AF6;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  font-size: 24rpx;
  height: auto;
}

/* 列表视图任务列表 */
.task-list {
  padding: 0 20rpx;
}

.task-row {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  transition: transform 0.2s, box-shadow 0.2s;
}

.task-row:hover {
  transform: translateY(-3rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.row-image {
  position: relative;
  width: 200rpx;
  height: 160rpx;
  flex-shrink: 0;
}

.row-image image {
  width: 100%;
  height: 100%;
  display: block;
}

.row-details {
  flex: 1;
  padding: 20rpx;
}

.row-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.row-actions {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  flex-shrink: 0;
}

.row-price {
  margin-right: 20rpx;
  text-align: right;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.favorite-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9CDD4;
}

.favorite-btn .favorite-icon.active {
  color: #F5222D;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 20rpx;
  text-align: center;
}

.empty-icon {
  font-size: 80rpx;
  color: #C9CDD4;
  margin-bottom: 30rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 15rpx;
}

.empty-subtitle {
  font-size: 26rpx;
  color: #86909C;
  margin-bottom: 30rpx;
  max-width: 500rpx;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 20rpx;
}

.loader {
  width: 50rpx;
  height: 50rpx;
  border: 6rpx solid #E5E9F2;
  border-top-color: #367AF6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 26rpx;
  color: #86909C;
}

/* 加载更多 */
.load-more {
  padding: 30rpx 20rpx;
  display: flex;
  justify-content: center;
}

.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx 30rpx;
  background-color: #fff;
  border: 1px solid #E5E9F2;
  border-radius: 35rpx;
  font-size: 26rpx;
  color: #4E5969;
}

.small-loader {
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #E5E9F2;
  border-top-color: #367AF6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 15rpx;
}

/* 发布任务浮动按钮 */
.floating-publish-btn {
  position: fixed;
  bottom: 30rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  background-color: #367AF6;
  color: #fff;
  border-radius: 50rpx;
  padding: 15rpx 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(54, 122, 246, 0.3);
  z-index: 40;
}

.plus-icon {
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  margin-right: 15rpx;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
}

/* 接单成功弹窗 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  position: relative;
  z-index: 10;
}

.success-icon {
  width: 100rpx;
  height: 100rpx;
  background-color: #00B42A;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin: 0 auto 30rpx;
}

.success-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 15rpx;
}

.success-message {
  font-size: 26rpx;
  color: #4E5969;
  margin-bottom: 30rpx;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.btn-secondary, .btn-primary {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
}

.btn-secondary {
  background-color: #F2F3F5;
  color: #4E5969;
  border: none;
}

.btn-primary {
  background-color: #367AF6;
  color: #fff;
  border: none;
}

/* 动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>